<template>
  <div>
    <button @click="incr">增加</button>
    <div>{{ count }}</div>
    <div>{{ countMsg }}</div>
    <div>{{ people }}</div>
    <input placeholder="姓名" v-model="person.name" />
    <input placeholder="年龄" v-model="person.age" />
    <button @click="add">添加</button>
    <child-first> </child-first>
    <ChildFirst></ChildFirst>
    <ElButton type="primary">go</ElButton>
  </div>
</template>
<script setup>
import ChildFirst from '@/components/ChildFirst.vue'
import { ref, reactive, computed ,onMounted,watch} from 'vue'

const count = ref(10)

const countMsg = computed(() => {
  if (count.value < 100) return '需要继续点击'
  else return '可以停下来了'
})

const incr = () => {
  console.log(count, count.value)
  count.value = count.value + 10
}
watch(count,(n,o)=>{
  console.log("watch count",n)
})
// watch(()=>count.value,(n,o)=>{
//   console.log("watch count2",n)
// })
const people = reactive([
  { name: 'zhangsan', age: 10 },
  { name: 'lisi', age: 11 }
])
// vue3中的深度监听
watch(people,(n,o)=>{
  console.log("watch people",n)
},{deep:true})

const person = ref({
  name: 'wangwu',
  age: 33
})
const add = () => {
  //   console.log(person, people)

  people.push({
    name: person.value.name,
    age: person.value.age
  })
}
onMounted(()=>{
  console.log("自动运行的函数 mounted")
})
</script>
